import React from 'react';
import { Card } from 'antd';
import createG2 from 'g2-react';
import { Stat, Frame } from 'g2';
import PropTypes from 'prop-types';

const Chart = createG2((chart) => {
  chart.col('date', {
    type: 'time',
    mask: 'mm.dd',
    tickCount: 12,
  });
  chart.col('value', {
    alias: ' ',
  });
  chart.legend({
    position: 'bottom',
  });
  chart.axis('date', {
    line: null,
    tickLine: {
      stroke: '#000',
      value: 6, // 刻度线长度
    },
    title: null,
  });
  chart.axis('value', {
    tickLine: {
      stroke: '#000',
      value: 6, // 刻度线长度
    },
    labels: {
      label: {
        fill: '#000',
      },
    },
    line: {
      stroke: '#000',
    },
    grid: null,
  });


  const arr_color = ['#1f77b4', '#ff7f0e', '#2ca02c', '#A9F5D0', '#58FAD0', '#58FAD0', '#0489B1', '#0489B1', '#DF01A5', '#4B088A'];
  Array.prototype.shuffle = function (n) {
    let len = this.length,
      num = n ? Math.min(n, len) : len,
      arr = this.slice(0);
    arr.sort((a, b) => {
      return Math.random() - 0.5;
    });
    return arr.slice(0, num - 1);
  };


  chart.line().position('date*value').color('city', arr_color.shuffle()).shape('spline').size(2);
  chart.render();
});

class LineChart extends React.Component {
  constructor(...args) {
    super(...args);
    const { width, height } = args[0].stys;

        // const {width,height} = args[0].styles.styles
    this.state = {
      data: [],
      loading: false,
      forceFit: true,
      width,
      height,
      plotCfg: {
        margin: [20, 20, 60, 50],
      },
    };
  }


  componentWillReceiveProps({ msg }) {
    const onMsg = msg || [];
    console.log('acsdsdsdsd');
    console.log(msg);
    const arr = [];
    for (let j = 0; j < onMsg.length; j++) {
      for (const i in onMsg[j]) {
        switch (i) {
          case 'new_user': onMsg[j]['新增用户'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'cancel_user': onMsg[j]['取关用户'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'int_page_read_user': onMsg[j]['阅读人数'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'int_page_read_count': onMsg[j]['阅读次数'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'share_user': onMsg[j]['分享人数'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'share_count': onMsg[j]['分享次数'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'sex0': onMsg[j]['未知'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'sex1': onMsg[j]['男'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'sex2': onMsg[j]['女'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          default:
        }
      }
    }

    for (const i in onMsg[0]) {
      arr.push(i);
    }
    const [a, ...b] = arr;
    let frame = new Frame(onMsg);
    frame = Frame.combinColumns(frame, b, 'value', 'city', 'date');
    this.setState({
      data: frame,
    });
  }
  render() {
    const { title } = this.props || '';
    return (
      <Card bodyStyle={{ padding: 0 }}>
        <h3 style={{ textAlign: 'center' }}>{title}</h3>
        <Chart
          data={this.state.data}
          width={this.state.width}
          height={this.state.height}
          plotCfg={this.state.plotCfg}
          forceFit={this.state.forceFit}
        />
      </Card>
    );
  }
}


LineChart.propTypes = {
  msg: PropTypes.array,
};


export default LineChart;

